<template>
  <div class="learnTips">
    <div class="learnTips__content">
      <div class="learnTips__content__title">
        <div class="bigtext">Tips and tutorials</div>
        <div class="smalltext gray lh24">
          Get practical, step-by-step answers to all things crypto
        </div>
      </div>


      <div class="card max">
        <div class="carditembox" v-for="item in 8">
          <div class="cardimg">
            <img
              src="https://images.ctfassets.net/q5ulk4bp65r7/3nIT36ObLVXq6CIlnXLmXv/d1d5bde731457c87808aca7cc69a984d/what-are-nfts.png?w=768&fm=png"
              alt="">
          </div>
          <div class="gray mt10 fw600">
            GLOSSARY
          </div>
          <div class="midtext mt10 psize">
            Don’t let FUD give you FOMO or you’ll end up REKT — crypto slang, explained
          </div>
          <div class="smalltext lh24 ">
            From diamond hands to the flippening, we break down 11 of the most popular pieces of crypto lingo
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  setup() {


    return {}
  }
}
</script>

<style lang="scss" scoped>
.fw600 {
  font-weight: 600;
  font-size: 14px;
}

.mt10 {
  margin-top: 10px;

}

.max {
  margin: 0 auto;
  max-width: 1220px;
}

.lh24 {
  line-height: 24px;
}

.gray {
  color: #5B616E;
}

.bigtext {
  font-size: 52px;
  font-weight: 600;
}

.midtext {
  font-size: 34px;
  font-weight: 600;
  cursor: pointer;

}

.smalltext {
  font-size: 16px;
}

.learnTips__content {
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;

  .learnTips__content__title {
    padding: 80px 16px;
    margin: 0 auto;
    max-width: 1220px;
    text-align: center;
  }
}

.card {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;

  .carditembox {
    cursor: pointer;
    flex: 0 0 calc(50% - 20px);
    /* 每个项目占据 50% 的宽度，并减去间隔大小 */
    display: flex;
    flex-direction: column;

    &:hover {
      color: #0052FF;
    }

    .cardimg {
      width: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}



@media screen and (max-width: 768px) {
  .learnTips__content {
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;

    .learnTips__content__title {
      padding: 80px 16px;
      margin: 0 auto;
      max-width: 1220px;
      text-align: center;
    }
  }

  .card {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0px 16px;

    .carditembox {
      cursor: pointer;
      flex: 1;
      /* 每个项目占据 50% 的宽度，并减去间隔大小 */
      display: flex;
      flex-direction: column;

      &:hover {
        color: #0052FF;
      }

      .cardimg {
        width: 100%;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .psize {
        font-size: 24px;
      }
    }
  }

}
</style>